<template>
	<view>
	    
		<view class="myService">
			<uni-nav-bar left-icon="back" title="申请售后" @clickLeft="gotoBack" :border="false" color="#fff" rightIcon="headphones" right-text="客服"  backgroundColor="transparent"></uni-nav-bar>
			<view class="service">
			 	<view class="goodSubject">请选择服务类型</view>
				<view class="aftersalesType">
					<view class="aftersalesBtn" :class="aftersalesType?'aftersalesBtnActive':''" @click="btnAftersalesClick(1)">换货</view>
					<view class="aftersalesBtn" :class="aftersalesType?'':'aftersalesBtnActive'" @click="btnAftersalesClick(0)">退货</view>
				</view>
			 	<view class="orderGoods" v-if="goodsInfo.goodsName">
			 		<view class="box-thumbnail">
			 			<image :src="goodsInfo.pic" mode="aspectFill"></image>
			 		</view>
			 		<view class="box-info">
			 			<view class="box-info__top">
			 				<view class="box-info__title">{{goodsInfo.goodsName}}</view>
			 				<view class="box-info__total_amount"></view>
			 			</view>
			 			<view class="box-info__bottom">
			 				<view class="box-info__status">{{msg                                                                                                                                                                                                  }}  {{goodsInfo.size}}</view>
			 				<view class="box-info__num"></view>
			 			</view>
			 			<view class="box-ret">
			 				<view class="labReturn">申请数量</view>
			 				<view class="numboxFather">
								<numbox :title='needNum' @clickLeft='btnNeedDetClick' @clickRight='btnNeedAddClick'></numbox>
			 				</view>
			 			</view>
			 	    </view>
			    </view>
				<view class="common">
					<view class="text1">申请产品</view>
					<view class="reasonChoose" @click="btnReasonClick">
						<uni-icons type="arrowright" color="#333" size="15"></uni-icons>
						<view class="backReason">{{backReason.itemText}}</view>
					</view>
				</view>
				<view class="common" style="border-top: 1rpx solid #f2f2f2;">
					<view class="text1">请选择售后理由</view>
					<view class="reasonChoose" @click="btnReasonClick">
						<uni-icons type="arrowright" color="#333" size="15"></uni-icons>
						<view class="backReason">{{backReason.itemText}}</view>
					</view>
				</view>
				<view class="common" style="border-top: 1rpx solid #f2f2f2;">
					<view class="text1">问题描述</view>
				</view>
				<view class="reason">
				   <textarea :maxlength="-1" auto-height  v-model="textA" placeholder="请描述申请售后服务的具体原因" placeholder-class="placeH"  />
				</view>
			</view>
			<view class="reasons">
				
				<view class="labContent">上传凭证</view>
				<imgUpload :imgArr="imgArray" imgCount="6" ref="imgUpload" loading async :url="imageUploadUrl"
				 @result="resultUrl" @delImg="delImg" ></imgUpload>
				 <view class="labCom">为了更好的帮您解决问题，请务必上传有效的凭证</view>
				 <!-- :pressImg='80' -->
			</view>
			<view class="reasons">
				<view class="common">
					<view class="text1">返回方式</view>
					<view class="reasonChoose" >
						<!-- @click="btnbackClick" -->
						<uni-icons type="arrowright" color="#333" size="15"></uni-icons>
						<view class="backReason">自寄</view>
					</view>
				</view>
				<view class="labTips">请将物品邮寄至下方地址，并将快递号抄写放置在快递袋中一并寄回</view>
				<view class="labTips labTipsBold">快递号：<text>8998789</text></view>
				<view class="addressContent">
					<image src="../../static/aftersalesIcon.png" mode="widthFix"></image>
					<view class="addressInfo">
						<view class="userInfo">
							<text class="name one-omit">{{addressData.contract}}</text>
							<text class="phone">{{addressData.phone}} </text>
						</view>
						<text class="address ">{{addressData.addr}}</text>
					</view>
				</view>
				<view class="common">
					<view class="chooseColor">快递单号</view>
					<view class="inputG">
						<input type="text"  v-model="introduction" placeholder="请输入快递单号" />
					</view>
					
				    <!-- <image :src="expressUrl" mode="widthFix"></image> -->
				</view>
			</view>
			<view class="btnGroup">
				<view class="btn showBtnBackColor" @click="btnAddAddr">
				    提交
				</view>
			</view>
		</view>
		
		
		
		<uni-popup ref="popSzieData" type="bottom">
			<view class="categoryContent">
				<view class="pickerBtn">
					<view class="popBnt cancer">请选择</view>
					<view class="popBnt" @click="btnSizeCancerSex">
						<uni-icons type="closeempty" color="#ccc" size="20"></uni-icons>
					</view>
				</view>
				 <view class="pickerView">
				   <picker-view class="picker" indicator-class="indicator" :value="CategoryStrat" @change="bindSexChange" @pickstart='bindSexStartChange' @pickend='bindSexEndChange'>
						<picker-view-column class="column">
						  <view v-for="(item, index) in CategoryData" :key="index">{{item.itemText}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btnPopSizeGroup">
					<view class="btnPopSize showBtnBackColor" @click="btnSizeConfirmSex">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import numbox from '@/components/numbox/numbox.vue'
	import {sysDict,queryAddr,applyAfterSale} from '../../api/index.js'
	import imgUpload from '@/components/poiuy-uImgUpload/imgUpload.vue';
	import {formatDate} from '@/components/uni-dateformat/date-format.js'
	export default {
		data() {
			return {
				imgArray:[],//展示图片
				imageUploadUrl:'',//上传地址
				showLeaflet:true,
				aftersalesType:true,
				appSchoolId:'',
				userId:undefined,
				goodsInfo:{},
				addressData:{},
				backReason:{itemText:'',itemValue:''},
				backWay:{itemText:'',itemValue:''},
				textA:'', // 退款描述
				needNum:1,
				CategoryIndex:-1,//必选的index
				CategoryStrat:[0],//必选的开始位置
				CategoryData:[],//必选的数据源
				ReasonArr:[],//返回原因
				backArr:[],   //退款渠道
				expressUrl:'',//快递图片
				introduction:'',//快递单号
				canBtn:false,
				orderCode:'',
				returnMoney	:'0.00',
			
				
			}
		},
		onLoad(option) {
			if (option.item) {
				
			this.goodsInfo = JSON.parse(decodeURIComponent(option.item));
			this.orderCode = option.orderCode
			this.returnMoney = this.goodsInfo.price;
			
			}
			this.imageUploadUrl = getApp().globalData.baseUrl +'/manage/sys/common/upload?isup=1'
			this.appSchoolId = getApp().globalData.appSchoolId
			this.userId=  getApp().globalData.userId
			this.showHiddenLeaflet();
			this.requstSysDict();
			// this.requstbackWay();
			this.requstQueryAddr();
			
			
		},
		components: {
			imgUpload,
			numbox
		},
		methods: {
			//换货原因
			async requstSysDict(){
				
				let {result} = await sysDict({dictCode:'bg_reason'});
			    this.ReasonArr = result;           
			
			},
			//钱返回方式
			async requstbackWay(dict){
				
				let {result} = await sysDict({dictCode:'back_way'});
			    this.backArr = result;           
			
			},
			//获取退货地址
			async requstQueryAddr(dict){
				
				let {result} = await queryAddr({schoolId:this.appSchoolId});
			    this.addressData = result;           
			
			},
			//
			async requstApplyAfterSale(dict){
				
				let {result} = await applyAfterSale(dict);
				
				uni.showToast({
					title:'提交成功',
					icon:'success'
				},1500) 
				setTimeout(()=>{
					
					let pages = getCurrentPages();
					let page = pages[pages.length - 2];
					page.$vm.btnGetNewList();
					
					
					uni.navigateBack({
						delta: 1
					});
				},1500)
				
				
				
				
			
			},
			showHiddenLeaflet(){
				setTimeout(()=>{
					this.showLeaflet = false
				},6000)
			},
			//提交
			btnAddAddr(){
				
				if (this.backReason == '') {
					
					 uni.showToast({
						title:'请选择退货原因',
						icon:'none'
					 },1500)
					
					return
				}
				if (this.textA == '') {
					
					 uni.showToast({
						title:'请填写退货具体原因',
						icon:'none'
					 },1500)
					
					return
				}
				
				if (this.imgArray.length == 0) {
					
					 uni.showToast({
						title:'请选择上传图片',
						icon:'none'
					 },1500)
					
					return
				}
				if (this.introduction.trim() == '') {
					
					 uni.showToast({
						title:'请输入快递单号',
						icon:'none'
					 },1500)
					
					return
				}
				
				let  goodsTime = formatDate(this.goodsInfo.deliveryTime,'yyyy-MM-dd hh:mm:ss')
				
				debugger
				let dict = {beforeGoodsCode:this.goodsInfo.goodsCode,beforeGoodsName:this.goodsInfo.goodsName,beforeGoodsPrice:this.goodsInfo.price,beforeGoodsSize:this.goodsInfo.size,deliveryListCode:this.goodsInfo.deliveryCode,freight:'0.00',hflAddress:this.addressData.addr,num:this.needNum,orderCode:this.orderCode,reasonType:this.backReason.itemValue,reasonName:this.backReason.itemText,
				reasonMarks:this.textA,returnMoneyType:'原路返回',receiveTime:goodsTime,returnMoney:this.returnMoney,returnType:'1',returnTypeName:'自寄',type:'1',uploadGoodsPics:this.imgArray,userId:this.userId,expressCode:this.introduction};
				this.requstApplyAfterSale(dict);
				
			},
			btnAftersalesClick(num){
			  if (num == 1) {
			  	 this.aftersalesType = true
			  } else{
			  	 this.aftersalesType = false
			  }	
			},
			
			//返回原因
			btnReasonClick(){
				
				this.CategoryIndex  = 1;
				this.CategoryData = this.ReasonArr;
				this.CategoryStrat = [0];
				this.$refs.popSzieData.open();
				
				
				
			},
			//返回模板
			btnbackClick(){
				this.CategoryIndex  = 2;
				this.CategoryData = this.backArr;
				this.CategoryStrat = [0];
				
				this.$refs.popSzieData.open();
			},
			btnSizeConfirmSex(){
				
				// debugger
				
				if (this.CategoryIndex == 1) {
					
					
					this.backReason = this.CategoryData[this.CategoryStrat[0]];
					
				} else{
					this.backWay = this.CategoryData[this.CategoryStrat[0]];
					
					
				}
				this.btnSizeCancerSex()
				
			},
			btnSizeCancerSex(){
				
				this.$refs.popSzieData.close();
				
			},
			bindSexChange(e){
				console.log('bindCategoryChange',e);
				this.CategoryStrat=e.detail.value;
				
			},
			bindSexStartChange(){
				console.log('321开始转动');
				this.canBtn = true
				
			},
			bindSexEndChange(){
				console.log('321结束转动');
				this.canBtn  =false
			},
			btnNeedDetClick(){
						  
						  
			  if (this.needNum  > 1) {
				this.needNum --;
				this.returnMoney = this.goodsInfo.price*this.needNum
	
			  }else{
				  uni.showToast({
				  	icon:'none',
					title:'需退货的商品数量要大于1'
				  })
			  }
			},
			btnNeedAddClick(){
				
				if (this.needNum <  this.goodsInfo.goodsNum) {
					
					this.needNum ++;
                    this.returnMoney = this.goodsInfo.price*this.needNum
				}else{
					uni.showToast({
						icon:'none',
					    title:'需退货的商品数量不能大于购买数量'
					})
				}
				
			},
				
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			resultUrl(e) {
				console.log('imageRes',e);
				//成功默认为0
				if (e.code == 0) {
					this.imgArray.push(e.message);
					console.log('imageList',this.imgArray)
				}
			},
			delImg(e) {
				
				this.imgArray.splice(e, 1) //为删除图片数组的下标
				console.log(this.imgArray)
			}
			
		}
	}
</script>

<style lang="less">
		
    page{
		
		height: 100%;
		background-color: #f2f2f2;
	}
	.leaflet{
		position: absolute;
		top: 0rpx;
		left: -20rpx;
		width: 690rpx;
		padding: 20rpx 30rpx;
		background-color: #FFF5E2;
		color: #EF7311;
		font-size: 26rpx;
		min-height: 60rpx;
		.uni-icons{
			position: relative;
			top: 6rpx;
			padding-right: 10rpx;
		}
	}
	.myService{
		// padding: 20rpx 20rpx 0;
		padding-top:  var(--status-bar-height);
		background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
		height: 360rpx;
		.service{
			
			
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			margin: 64rpx 20rpx 0;
			position: relative;
			
			.goodSubject{
				// padding:20rpx 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.aftersalesType{
				display: flex;
				margin-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: thin solid #f2f2f2;
				
				.aftersalesBtn{
					width: 180rpx;
					height: 68rpx;
					border-radius: 34rpx;
					border: 1rpx solid #DEDEDE;
					text-align: center;
					line-height: 68rpx;
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
					margin-left: 30rpx;
				}
				.aftersalesBtnActive{
					border: 1px solid #0005C9;
					color: #0005C9;
				}
				
			}
			.orderGoods {
				display: flex;
				flex-direction: row;
				margin-top: 30upx;
				margin-left: 40rpx;
				padding-bottom: 40rpx;
				padding-right: 20rpx;
				
			
				.box-thumbnail {
					width: 106upx;
					height: 106upx;
					margin-right: 20upx;
					box-shadow: 0upx 2upx 10upx 0upx #EEF0F4;
			
					image {
						width: 100%;
						height: 100%;
						border-radius: 8px;
						border: 1rpx solid #f2f2f2;
					}
				}
			
				.box-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					
						
					.box-info__top{
						
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #333333;
						font-size: 24upx;
						font-weight: 400;
						.box-info__title {
							
			
						}
						.box-info__total_amount {
							// font-weight: 500;
							white-space: nowrap;
							margin-left: 30rpx;
							color:#F54353 ;
							
						}
					}
					.box-info__bottom {
						// margin-top: 10upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24upx;
						color: #999;
						font-weight: 400;
						margin-top: 10rpx;
						.box-info__num{
							font-size: 28rpx;
						}
						
					}
					.box-ret{
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						.labReturn{
							color: #333333;
							font-size: 24upx;
						}
						
				
					}
				}
			}
			.reason{
				margin-top: 20rpx;
				padding: 20rpx;
				// border: thin solid #ccc;
				background-color: #F9F9F9;
				border-radius: 2rpx;
				height: 137rpx;
				
				.labRemark{
					border: 1rpx solid #F2F2F2;
					height: 88rpx;
					color: #333333;
					font-size: 28rpx;
				}
				
				textarea{
					width: 100%;
					height: 100%;
					font-size: 24rpx;
				}
				.placeH{
					color: #999;
				}
			}
	
	
		}
	}
	.goods{
		padding: 0 20rpx;
		margin-top: 75rpx;
	}

	.reasons{
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		.labTips{
			font-size: 22rpx;
			color: #E01C2D;
			// margin: 20rpx 0;
			padding-top: 20rpx;
			border-top: 1rpx solid #f2f2f2;
			
			text{
				font-size: 45rpx;
				font-weight: 500;
			}
		}
		.labContent{
			font-size: 28rpx;
			color: #333;
			margin-bottom: 30rpx;
		}
		.labCom{
			font-size: 22rpx;
			color: #E01C2D;
		}
		.labTipsBold{
			font-size:32rpx;
			border-top: 0rpx solid #f2f2f2;
			padding-top: 0;
		}

		.addressContent {
			position: relative;
			margin-top: 20upx;
			
			min-height: 128upx;
			background: #FFFFFF;
		
			// border-radius: 8upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx;
			padding-right:0upx;
			
			image{
				width: 20rpx;
				height: 40rpx;
			}
			.addressInfo {
				// margin-left: 20upx;
				// display: flex;
				// flex-direction: column;
				position: absolute;
				height: 168upx;
				left: 100upx;
				right: 60upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
		
				.userInfo {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 20rpx;
		            font-size: 28upx;
					font-weight: 400;
					color: #999;
					.name {
						max-width:350upx ;
					}
		
					.phone {
						margin-left: 20upx;
					}
				}
		
				.address {
		
					font-size: 26upx;
					font-weight: 400;
					color: #333333;
					line-height: 42upx;
				}
			}
		}

		.returnMoney{
			display: flex;
			flex-direction: row;
			font-size: 40upx;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
			
			.labValue{
				margin-left: 30rpx;
				
			}
		}
		
	}
	.common {
		height: 88upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.reasonChoose {
			display: flex;
			align-items: center;
			width: 450rpx;
			height: 50rpx;
			flex-direction: row-reverse;
			// justify-content: space-between;
			.backReason{
				margin-right: 10rpx;
				font-size:26upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333;
			}
			
		}
		.chooseColor{
			color: #999;
			font-weight: 400;
			font-size: 26rpx;
			width: 250rpx;
		}
		.text1 {
	
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
	
		}
		.inputG{
			flex: 1;
			height: 60rpx;
			border: 1rpx solid #999;
			border-radius: 10rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			
			input {
				font-size: 26upx;
				font-weight: 400;
				color: #666;
				height: 100%;
				text-align: right;	
			}
		}
		
	}
	.btnGroup{
	   padding-top: 40rpx;
	   height: 160rpx;
	   padding-bottom: 140upx;
	   padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));  
	   padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	   
	   .btn{
		   color: #fff;
		   // background-color: #dd524d;
		   height: 100rpx;
		   line-height: 100rpx;
		   border-radius: 50rpx;
		   margin: 20rpx 40rpx;
		   font-size: 32rpx;
		   text-align: center; 
	   }
	}
	.categoryContent{
		width: 750upx;
		background-color: #fff;
		// padding-bottom: 40rpx;
		.pickerBtn{
			height: 101rpx;
			line-height: 101rpx;
			background-color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: thin solid #ccc;
			padding: 0 20rpx;
			
			.popBnt{
				// width: 80upx;
				text-align: center;
			}
			.cancer {
				color: #888;
			}
			.confirm{
				color: #4CD964;
			}
		}
		.picker {
		  background-color: #fff;
		  width: 100%;
		  height: 370rpx;
		  }
		  .column {
			font-size: 40rpx;
			color: #000;
			text-align: center;
			line-height: 80rpx;
		  }
		  .indicator {
			  height: 80rpx;
			  border-top: thin solid #f2f2f2;
			  border-bottom:thin solid #f2f2f2;
		  }
		  .btnPopSizeGroup{
			  
			  bottom: 0rpx;
			  bottom: calc(0rpx + constant(safe-area-inset-bottom));  
			  bottom: calc(0rpx + env(safe-area-inset-bottom));
			  
			  .btnPopSize{
				  
				  color: #fff;
				  // background-color: #FF1493;
				  height: 84rpx;
				  line-height:84rpx;
				  border-radius:41rpx;
				  font-size: 32rpx;
				  text-align: center;
				  
			  }  
		  }
	}
	.popupContent {
		background-color: #fff;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		padding-bottom: 92upx;
		.title {
			text-align: center;
			font-size: 46upx;
			font-weight:bold;
			color: #333333;
			position: relative;
			padding-top: 29upx;
			
			.uni-icons {
				position: absolute;
				top: 30upx;
				right: 30upx;
				// background-color: #666;
			}
		
		}
		.popimgG{
			width: 210rpx;
			height:210rpx;
			border: thin solid #FF0000;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
			margin-left: 30rpx;
			border-radius: 20rpx;
			background-color: rgba(255,182,193,0.3);
			image{
				width: 60rpx;
				height: 60rpx;
				
			}
			.lab1{
				color: #E01C2D;
				font-size: 26rpx;
				text-align: center;
				margin-top: 20rpx;
			}
			
		}
		.popTitle{
			font-size: 28upx;
			font-weight: 300;
			color: #333;
			margin-left: 30upx;
			margin-top: 40upx;
		}
		.popContent{
			padding: 30rpx;
			.popLab2{
				
				font-size: 28upx;
				font-weight: 300;
				color: #666;
				
				
			}
		}
		.btnPopSizeGroup{
		    
		  // bottom: 0rpx;
		  // bottom: calc(0rpx + constant(safe-area-inset-bottom));  
		  // bottom: calc(0rpx + env(safe-area-inset-bottom));
		  margin-top: 40rpx;
		  .btnPopSize{
			  
			  color: #fff;
			  // background-color: #FF1493;
			  height: 84rpx;
			  margin: 0 80rpx;
			  border-radius: 41rpx;
			  line-height:84rpx;
			  // border-radius: 10rpx;
			  font-size: 32rpx;
			  text-align: center;
			  
		  }  
		}
	}
</style>
